<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="query">
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="请输入查询关键字~"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="advancedQuery">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="edit">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading"
                  @selection-change="selectionsChange" style="width: 100%;">
            <el-table-column type="selection" width="%5">
            </el-table-column>
            <el-table-column type="index" width="%5">
            </el-table-column>
            <el-table-column prop="name" label="名字" width="%12" sortable>
            </el-table-column>
            <el-table-column prop="tel" label="电话" width="%16" sortable>
            </el-table-column>
            <el-table-column prop="address" label="地址" width="%14" sortable>
            </el-table-column>
            <el-table-column prop="logo" label="商标" width="%14" sortable>
            </el-table-column>
            <el-table-column prop="admin.username" label="店长" width="%14" sortable>
            </el-table-column>
            <el-table-column width="%14" label="状态" sortable>
                <template slot-scope="scope" >
                    <span v-if="scope.row.state == 1" style="color: yellow" >待审核</span>
                    <span v-if="scope.row.state == 2" style="color: greenyellow" >审核通过待认证</span>
                    <span v-if="scope.row.state == 3" style="color: green" >正常</span>
                    <span v-if="scope.row.state == 4" style="color: red" >驳回</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="edit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.selections.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" 
                           @current-change="handleCurrentChange" 
                           :page-size="query.pageSize" :total="pageInfo.total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="新增/修改" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="80px" ref="editForm">
                <el-form-item label="姓名" label-width="120px">
                    <el-input v-model="editForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="120px">
                    <el-input v-model="editForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="120px">
                    <el-input v-model="editForm.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="头像" label-width="120px">
                    <el-input v-model="editForm.headImage" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" label-width="120px">
                    <el-input v-model="editForm.age" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门" label-width="120px">
                    <el-select v-model="editForm.department"  value-key="id" placeholder="请选择">
                        <el-option
                                v-for="item in departments"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    export default {
        name: "shopPage",
        data() {
            return {
                filters: {
                    name: ''
                },
                pageInfo:{
                    rows: [],
                    total: 0
                },
                query:{
                    currentPage: 1,
                    pageSize: 10,
                    keyword: ""
                },
                listLoading: false,
                selections: [],//列表选中列
                editLoading: false,
                editFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                //编辑界面数据
                editForm: {
                    id:null,
                    username:"",
                    password:"",
                    email:"",
                    headImage:"",
                    age:null,
                    department:{
                        id:null,
                        name: ""
                    }
                },
                departments:[],
                addFormVisible: false,//新增界面是否显示
                addLoading: false,

            }
        },
        methods: {

            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getRows();
            },
            //高级查询
            advancedQuery(){
                this.query.currentPage=1
                this.getRows();
            },
            //获取用户列表
            getRows() {
                this.$http.post("/shop",this.query).then(result=>{
                    result=result.data;
                    if(result.success){
                        this.pageInfo = result.result;
                    }else {
                        this.$message("查询失败！"+result.message,"error")
                    }
                }).catch(error=>{
                    this.$message("查询失败"+error.message,"error")
                })
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { id: row.id };
                    this.$http.delete("/shop/"+row.id).then(result=>{
                        debugger
                        result = result.data;
                        if(result.success){
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.query.currentPage=1;
                            this.getRows();
                        }else{
                            this.listLoading = false;
                            this.$message("删除失败",result.message);
                        }
                    }).catch(error=>{
                        this.$message("删除失败",error.message);
                    })
                }).catch(() => {
                    this.$message("已取消删除","info");
                });

            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //显示新增界面
            edit(index,value) {
                this.addFormVisible = true;
                if(!value){
                    this.editForm = {
                        id:"",
                        username:"",
                        password:"",
                        email:"",
                        headImage:"",
                        age:null,
                        department:{
                            id:null,
                            name: ""
                        }
                    };
                }else {
                    this.editForm = value;
                }
                this.$http.get("/department").then(result=>{
                    result = result.data;
                    if(result.success){
                        this.departments = result.result;
                        let deps = this.departments;
                    }else{
                        this.$message("查询部门失败，请稍后重试","error");
                    }
                }).catch(error=>{
                    this.$message("查询部门失败！","error");
                })
            },
            //编辑
            editSubmit () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            this.$http.put("/shop",this.editForm).then(result=>{
                                result = result.data;
                                this.editLoading=false;
                               if(result.success){
                                   this.query.currentPage=1;
                                   this.getRows();
                                   this.$message({
                                       message: "保存成功",
                                       type: "success"
                                   });
                               } else{
                                   this.$message("保存失败！","error");
                               }
                            }).catch(error=>{
                                this.editLoading=false;
                                this.$message("保存失败！","error");
                            })
                            this.editLoading=false;
                            this.addFormVisible = false
                        });
                    }
                });
            },

            selectionsChange: function (selections) {
                this.selections = selections;
            },
            //批量删除
            batchRemove () {
                let ids = this.selections.map(item => item.id);

                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    debugger
                    this.$http.patch("/shop",ids).then(result=>{
                        result=result.data;
                        if(result.success){
                            this.listLoading = false;
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            })
                            this.query.currentPage=1;
                            this.getRows();
                        }else{
                            this.listLoading = false;
                            this.$message("删除失败！","error");
                        }
                    })
                }).catch(() => {
                    this.listLoading = false;
                    this.$message("删除失败！","error");
                });
                this.listLoading = false;
            }
        },
        mounted() {
            this.getRows();
        }
    }
</script>

<style scoped>

</style>